<script setup lang="ts">
import ClassTypeFormPanel from './ClassTypeFormPanel.vue'
import { ClassTypeApi } from '@/apis'
import type { TableInstanceColumns } from '@/components/ProTable/type'
import { useTable } from '@/hooks'
import { useUserStore } from '@/stores'

defineOptions({ name: 'ClassType' })

const userStore = useUserStore()
const queryForm = reactive<ClassTypeApi.ClassTypeQuery>({
  status: 1,
})

const {
  tableData: dataList,
  loading,
  search,
  handleDelete,
} = useTable(() => ClassTypeApi.getList({ ...queryForm }), { immediate: false })

const columns: TableInstanceColumns[] = [
  { title: '名称', dataIndex: 'name', slotName: 'name' },
  { title: '等级', dataIndex: 'level', slotName: 'level', sortable: { sortDirections: ['descend', 'ascend'] } },
  { title: '状态', dataIndex: 'status', slotName: 'status' },
  { title: '描述', dataIndex: 'description', slotName: 'description', render: ({ record }) => record.description || '--' },
  {
    title: '操作',
    slotName: 'action',
    width: 120,
    align: 'center',
    fixed: 'right',
    show: userStore.hasPermission(['system:classType:write']),
  },
]

const checkFlag = ref(false)
const handleCheck = () => {
  checkFlag.value = !checkFlag.value
  queryForm.status = checkFlag.value ? undefined : 1
  search()
}

// 删除
const onDelete = (item: ClassTypeApi.ClassTypeResp) => {
  return handleDelete(() => ClassTypeApi.remove(item.id), {
    content: `是否确定删除[${item.name}]？`,
    showModal: true,
  })
}

// 新增
const ClassTypeFormPanelRef = ref<InstanceType<typeof ClassTypeFormPanel>>()
const onAdd = () => {
  ClassTypeFormPanelRef.value?.create()
}

// 详情
const onRowClick = (row) => {
  ClassTypeFormPanelRef.value?.open(row.id)
}

onMounted(() => {
  checkFlag.value = false
  search()
})
</script>

<template>
  <ProTable
    row-key="id" :data="dataList"
    :columns="columns" :loading="loading"
    :scroll="{ x: '100%', y: '100%', minWidth: 1000 }"
    :pagination="false"
    @row-click="onRowClick"
    @refresh="search"
  >
    <template #toolbar-left>
      <a-input v-model="queryForm.name" placeholder="请输入关键字" allow-clear @change="search">
        <template #prefix>
          <icon-search />
        </template>
      </a-input>
      <a-checkbox :default-checked="checkFlag" @change="handleCheck">
        展示所有班型
      </a-checkbox>
    </template>

    <template #toolbar-right>
      <a-button v-permission="['system:biz-info:manage']" type="primary" @click="onAdd">
        <template #icon>
          <icon-plus />
        </template>
        <span>创建</span>
      </a-button>
    </template>
    <template #status="{ record }">
      <CellStatus :status="record.status" />
    </template>
    <template #action="{ record }">
      <a-space>
        <a-link v-permission="['system:biz-info:manage']" status="danger" @click.stop="0" @click="onDelete(record)">
          删除
        </a-link>
      </a-space>
    </template>
  </ProTable>
  <ClassTypeFormPanel ref="ClassTypeFormPanelRef" @change="search" />
</template>

<style lang="less" scoped></style>
